<template>
    <div>
        <routerLink class="hot-item" v-for="type in types" :key="type._system_record_entry_id" :style="itemWidth"
                tag="div" :to="{path:'searchGood',query:{title:type.title,fcid:type.link}}"
        >
            <img :src="type.image">
            <p>{{type.title}}</p>
        </routerLink>
    </div>
</template>
<script>
export default {
    props: {
        types: {
            type: Array,
            required: true,
            default() {
                return new Array(10);
            }
        },
        rowNum: {
            type: Number,
            default: 5
        }
    },
    computed: {
        itemWidth() {
            return `width:${100 / this.rowNum}%`;
        }
    }
};
</script>
<style lang="less" scoped>
.hot-item {
    // width:25%;
    box-sizing: border-box;
    height: 3rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 0rem 0.1rem 0.2rem 0.1rem;
    > img {
        width: 100%;
        height: 70%;
        border-radius: 0.2rem;
    }
    > p {
        font-size: 0.27rem;
    }
}
// .content-detail-type>.hot-item{
//     width:33%;
//     box-sizing:border-box;
//     height:3rem;
//     display:flex;
//     flex-flow:row wrap;
//     justify-content:center;
//     align-items:center;
//     padding:0 0.2rem 0.2rem 0.2rem;
//     >img{
//         width:100%;
//         height:60%;
//         border-radius:0.2rem;
//     }
//     >p{
//         font-size:0.3rem;
//     }
// }
</style>